<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>自动部署</title>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}" href="css/layui.css">
    <style>
        .versions {
            font-size: 18px;
            margin-top: 20px;
            margin-left: 30px;
        }

        .layui-upload {
            margin-left: 30px;
            margin-top: 20px;
        }

        #chooseFile {
            width: 600px;
            background-color: #BFBFBF;
        }

        #startUpload {
            margin-left: 15px;
        }

        .system-service {
            margin-left: 30px;
        }

        .system-service > button {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .layui-layer-content {
            word-break: break-all;
            white-space: pre-line;
        }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div th:replace="fragment/common::top">顶部</div>

    <div th:replace="fragment/common::left">菜单</div>

    <div class="layui-body">
        <input id="isUploaded" type="hidden" value="false">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>版本升级</legend>
        </fieldset>
        <div class="versions">当前版本：<span th:text="${currentVersion}"></span>&emsp;上个版本：<span
                th:text="${oldVersion}"><span></div>
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="chooseFile">选择文件</button>
            <button type="button" class="layui-btn" id="startUpload">开始上传</button>
            <button type="button" class="layui-btn" id="update">一键升级</button>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>系统服务</legend>
        </fieldset>
        <div class="system-service">
            <button id="start" data-url="/startServer" class="layui-btn layui-btn-radius">启动</button>
            <button id="stop" data-url="/stopServer" class="layui-btn layui-btn-danger layui-btn-radius">停止</button>
            <button id="restart" data-url="/restartServer" class="layui-btn layui-btn-warm layui-btn-radius">重启</button>
            <button id="clear" data-url="/clearBackFile" class="layui-btn layui-btn-normal layui-btn-radius">清理</button>
        </div>
    </div>
    <script th:src="@{/static/js/layui.js}" src="js/layui.js"></script>
    <script>
        layui.use(['element', 'upload'], function () {
            var $ = layui.jquery;
            var upload = layui.upload;
            var flag = false;
            upload.render({
                elem: '#chooseFile',
                url: ctx + '/dep/upload',
                auto: false,
                bindAction: '#startUpload',
                accept: "file",
                exts: "zip",
                size: 102400,
                before: function (obj) {
                    layer.load();
                },
                done: function (data) {
                    $("#isUploaded").val("true");
                    layer.closeAll('loading');
                    if (data.state) {
                        flag = true;
                        layer.msg("上传成功", {icon: 1});
                    } else {
                        flag = false;
                        layer.msg(data.message, {icon: 2});
                    }
                }
            });

            $("#update").click(function () {
                if ($("#isUploaded").val() == "false") {
                    layer.msg("没有上传升级包不能执行升级操作", {icon: 2});
                    return;
                }
                if (!flag) {
                    layer.msg("升级包不符合格式请重新上传", {icon: 2});
                    return;
                }
                layer.open({
                    type: 2,
                    title: '进度',
                    shadeClose: true,
                    shade: false,
                    maxmin: false,
                    area: ['893px', '600px'],
                    content: ctx + '/dep/deployProgressIndex',
                    end: function () {
                        window.location.reload();
                    }
                });
                $.post(ctx + "/dep/update", {}, function (data) {
                    if (!data.state) {
                        layer.msg(data.message, {icon: 2});
                    }
                });
            });

            $("#start,#stop,#restart,#clear").click(function (event) {
                var index = layer.confirm('确认执行该操作吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    layer.close(index);
                    var data_url = $(event.target).attr("data-url");
                    var url = ctx + "" + data_url;
                    layer.load();
                    $.get(url, function (data) {
                        defaultOp(data);
                    });
                });
            });

            function defaultOp(data) {
                layer.closeAll('loading');
                if (data.status == 1) {
                    layer.open({title: "成功", content: data.logs});
                } else {
                    layer.open({title: "失败", content: data.logs});
                }
            }

        });
    </script>
</body>

</html>